<template>
  <!-- <v-touch v-on:panup="up" v-on:pandown="down" class="v-touch"> -->
    <div>
      <fmhead></fmhead>

      <!-- <div class="nav van-hairline--bottom">
        <van-tabs
          v-model="active"
          background="rgb(251,251,251)"
          title-active-color="#EE0A24"
          line-width="10px"
        >
          <van-tab
            :title="l.name"
            :type="l.type"
            v-for="(l, i) in navlist.dataList"
            :key="i"
          ></van-tab>
        </van-tabs>
      </div> -->

      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(m, k) in bannerlist.dataList" :key="k">
            <img :src="m.pic" alt="" @click="godetail(m.rid, m.albumId)"
          /></van-swipe-item>
        </van-swipe>
      </div>

      <!-- <div class="list">
        <div v-for="(q, w) in headlist.dataList" :key="w">
          <img :src="q.pic" alt="" />
        </div>
      </div> -->

      <div class="today" v-for="(v, c) in alllist" :key="c">
        <h3 v-if="v.dataList.length > 0" class="title">{{ v.name }}</h3>
        <div class="item">
          <div class="bigbox">
            <div
              v-for="(o, p) in v.dataList"
              :key="p"
              style="margin: 0 0 10px 10px"
              id="detail"
              @click="godetail(o.rid, o.albumId,o.dataReport)"
            >
              <img :src="o.pic" alt="" />
              <van-icon
                name="fire"
                color="red"
                size="30px"
                class="rightzs"
                v-if="o.payType"
              />
              <div v-if="o.albumId >= 0" class="bor" >
                <van-icon
                  name="play-circle"
                  color="#fff"
                  size="30px"
                  class="rightbo"
                  @click="chang(o.albumId,o.dataReport)"
                  @click.stop
                />
              </div>
              <p
                class="van-multi-ellipsis--l2"
                style="height: 32px; line-height: 32px"
              >
                {{ o.rname }}
              </p>
              <p class="bot van-ellipsis">{{ o.albumName }}</p>
            </div>
          </div>
        </div>
      </div>

      <div>
        <van-button
          class="moer"
          type="default"
          icon-position="right"
          icon="underway-o"
          @click="gotomore"
          >更多分类</van-button
        >
      </div>
      <myvideo :listenlist="listenlist" :flag="flag" :kid='kid' :songname="songname"></myvideo>
      <myfoot></myfoot>
    </div>
  <!-- </v-touch> -->
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import myvideo from "../../components/myvideo.vue";

Vue.use(Search);

export default {
  data() {
    return {
      headlist: [],
      bannerlist: [],
      navlist: [],
      active: 1,
      alllist: [],
      listenlist: [],
      count: 0,
      timer: null,
      flag: true,
      kid:null,
      songname:""
    };
  },
  methods: {
    up() {
      this.flag = false;
    },
    down() {
      this.flag = true;
    },
    godetail(value, value2,value3) {
      console.log(value, value2);
      this.$router.push({
        name: "detail",
        query: { id: value, albumid: value2,dataReport:value3 },
      });
    },
    gotomore() {
      this.$router.push({ name: "fenLei" });
    },
    chang(value,name) {
      this.kid=value
      this.songname=name
      
    },
  },
  mounted() {
    this.$ajax
      .getfm({
        installid: "0004ddrL",
        appid: "0",
        operator: "2",
        version: "5.3.4",
        udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
        sign: "1b881e03776150f8f1d54e594cc8f6a0",
        suppermode: "0",
        devicetype: "1",
        usertype: "0",
        mac: "020000000000",
        timestamp: "1609900766",
        sessionid: "391E433215AE420088931499ACA95134",
        idfv: "416DBEDF-8F90-44A8-BC8B-586F2F9036CD",
        producer: "apple",
        idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
        screensize: "375*812",
        likeCountDependOnServer: "1",
        pageid: "109",
        page: "200014",
        lat: "30.460388",
        osversion: "14.0.1",
      })
      .then((res) => {
        this.headlist = res.result.dataList[1];
        this.bannerlist = res.result.dataList[0];
        console.log(this.bannerlist)
        this.alllist = res.result.dataList;
        this.alllist = this.alllist.filter((item, i) => {
          return i !== 0 && i != 1 && i !== 2;
        });
        this.alllist.pop();
        console.log(this.alllist);
      }),
      this.$ajax
        .getnav({
          installid: "0004ddrL",
          appid: "0",
          operator: "2",
          version: "5.3.4",
          udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
          sign: "1b881e03776150f8f1d54e594cc8f6a0",
          suppermode: "0",
          devicetype: "1",
          usertype: "0",
          mac: "020000000000",
          timestamp: "1609900766",
          sessionid: "391E433215AE420088931499ACA95134",
          idfv: "416DBEDF-8F90-44A8-BC8B-586F2F9036CD",
          producer: "apple",
          idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
          screensize: "375*812",
          likeCountDependOnServer: "1",
          pageid: "109",
          page: "200014",
          lat: "30.460388",
          osversion: "14.0.1",
        })
        .then((res) => {
          this.navlist = res.result;
          console.log(this.navlist)
        });

    this.$ajax
      .gettuijian({
        //推荐列表
        installid: 10001,
        appid: 0,
        operator: 2,
        suppermode: 0,
        devicetype: 1,
        devicename: "Unknown%20iPhone",
        lon: "114.422947",
        channel: "appstore",
        action: "95",
        pagesize: "20",
        resolution: "750*1624",
        pagenum: "1",
        version: "5.3.4",
        udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
        type: "day",
        usertype: 0,
        sign: "1b881e03776150f8f1d54e594cc8f6a0",
        mac: "020000000000",
        timestamp: "1609940599",
        sessionid: "EBB7384383AD467080A05507B24886F7",
        timezone: "28800",
        network: "1",
        osversion: "14.0.1",
        lat: "30.460457",
        idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
        page: "0",
        producer: "apple",
        screensize: "375*812",
        idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
      })
      .then((res) => {
        // this.listenlist = res.result.dataList[0];
        // console.log(this.listenlist);
      });
  },
};
</script>

<style lang="scss" scoped>
.nav {
  margin-top: 3px;
}

::v-deep .van-tab {
  .van-tab__text {
    font-size: 16px !important;
  }
}

::v-deep .van-tabs__line {
  border-radius: 50%;
}
.banner {
  width: 100%;

  img {
    width: 100%;
    margin-top: -73px;
    height: 100%;
  }
}

// .van-grid{
// flex-wrap:nowrap
// }
.list {
  display: flex;
  background: #fff;
  white-space: nowrap;
  justify-content: space-between;
  overflow-x: auto;

  overflow-y: hidden;

  div {
    //  padding: 10px 5px 0px 7px;
    margin-left: 13px;
    display: flex;
    align-items: center;
    width: 130px;
    height: 100px;
    img {
      height: 70%;
    }
  }
}

.today {
  font-size: 13px;
  margin: 10px 0 10px 0;
  text-align: left;
  background: #fff;
  .bigbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    div {
      width: 30%;
      img {
        width: 100%;
      }
    }
  }
}
.title {
  font-size: 16px;
  font-weight: 800;
  line-height: 60px;
  padding-left: 10px;
}
.bot {
  color: #999;
  line-height: 20px;
}

.rightzs {
  position: absolute;
  right: 0;
  top: 0;
}
#detail {
  position: relative;
}

.bor {
  position: absolute;
  right: 0;
  bottom: 52px;
  border-radius: 50%;
}
.moer {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 120px;
}

// .music {
//   display: flex;
//   text-align: left;
//   align-items: center;
//   width: 96%;
//   height: 60px;
//   background-color: rgb(80, 80, 80, 0.9);
//   border-radius: 8px;
//   position: fixed;
//   bottom: 60px;
//   left: 0;
//   right: 0;
//   margin: auto;
//   justify-content: space-between;
//   .left {

//     height: 100%;
//     display: flex;
//     text-align: left;
//     align-items: center;
//   }
//     .right{
//         @extend .left;
//         margin-right: 10%;

//     }

// }
// #listenimg {
//   width: 18%;
//   height: 80%;
//   margin-left: 10px;
// }

// .name {
//   color: #fff;
//   font-size: 14px;
//   margin-left: 5%;
// }
// #play{
//     margin-right: 5%;

// }
// .next{
//     margin-left:18%;
// }
.v-touch {
  touch-action: pan-y !important;
}

// .fade-enter-active,
// .fade-leave-active {
//   transition: opacity .5s
// }
// .fade-enter,
// .fade-leave-active {
//   opacity: 0
// }
</style>